<include file="public@header"/>
<style>
    .data-item-tr, .search-btn {
        cursor: pointer;
    }

    .col-xs-3 {
        padding-right: 0;
    }
</style>
</head>
<body>
<div class="layui-fluid wrap js-check-wrap" id="component-tabs">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据源</div>
                <div class="layui-card-body">
                    <notempty name="filters">
                        <form method="post" action="{:url('theme/dataSource')}" id="search-form">
                            <div class="row">
                                <foreach name="filters" item="filter" key="filterName">
                                    <switch name="filter.type">
                                        <case value="text">
                                            <div class="col-xs-3">
                                                <div class="form-group">
                                                    <label class="sr-only">{$filter.title|default=''}</label>
                                                    <input type="text" class="form-control" name="{$filterName}"
                                                           placeholder="{$filter.placeholder|default=''}"
                                                           value="{$form[$filterName]|default=''}">
                                                </div>
                                            </div>
                                        </case>
                                        <case value="select">
                                            <div class="col-xs-3">
                                                <div class="form-group">
                                                    <label class="sr-only">{$filter.title|default=''}</label>
                                                    <select class="form-control" name="{$filterName}">
                                                        <notempty name="filter.placeholder">
                                                            <option value="">{$filter.placeholder|default=''}</option>
                                                        </notempty>
                                                        <foreach name="filter.options" item="option">
                                                            <php>
                                                                $option_selected='';
                                                                if(isset($form[$filterName]) &&
                                                                $form[$filterName]==$option['id']){
                                                                $option_selected='selected';
                                                                };
                                                            </php>
                                                            <option value="{$option.id}" {$option_selected}>
                                                                {$option.name}
                                                            </option>
                                                        </foreach>
                                                    </select>
                                                </div>
                                            </div>
                                        </case>
                                    </switch>
                                </foreach>
                                <div class="col-xs-3">
                                    <input type="hidden" value="{$data_source}" name="data_source">
                                    <button type="submit" class="btn btn-primary">搜索</button>
                                    <a class="btn btn-danger"
                                       href="{:url('theme/dataSource')}?data_source={$data_source}">清空</a>
                                </div>
                            </div>
                            <!--<div class="form-group">-->
                            <!--<div class="input-group">-->
                            <!--<input type="text" class="form-control" name="keyword" value="{$keyword|default=''}"-->
                            <!--placeholder="请输入关键字">-->
                            <!--<input type="hidden" value="{$data_source}" name="data_source">-->
                            <!--<span class="input-group-addon search-btn" onclick="submitSearchForm()">GO!</span>-->
                            <!--</div>-->
                            <!--</div>-->
                        </form>
                    </notempty>
                    <form method="post" class="layui-form js-ajax-form">
                        <table lay-filter="demo" lay-data="{id: 'idDemo'}" class="layui-table">
                            <thead>
                            <tr>
                                <th lay-data="{type:'radio',width:35,field:'label'}">
                                    <if condition="$multi">
                                        <input type="checkbox" class="js-check-all" data-direction="x"
                                               data-checklist="js-check-x">
                                    </if>
                                </th>
                                <th lay-data="{width:50,field:'id'}">ID</th>
                                <th lay-data="{field:'name'}">名称</th>
                            </tr>
                            </thead>
                            <tbody>
                            {$items_tree}
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<include file="public@footer"/>
<script>
    layui.define(['table'], function (exports) {
        var table = layui.table;

        table.init('demo', {
            limit: 10
        });
        $('.data-item-tr').click(function (e) {

            console.log(e);
            var $this = $(this);
            if ($(e.target).is('input')) {
                return;
            }

            var $input = $this.find('input');
            if ($input.is(':checked')) {
                $input.prop('checked', false);
            } else {
                $input.prop('checked', true);
            }


        });

        function confirm() {
            var selectedObjectsId = [];
            var selectedObjectsName = [];
            var selectedObjects = [];


            let checkStatus = table.checkStatus('idDemo');
            for (let i in checkStatus.data) {
                let name = checkStatus.data[i].name;

                let id = checkStatus.data[i].id
                let start = name.indexOf('>');
                let end = name.indexOf('<', start);

                selectedObjectsId.push(id);
                selectedObjectsName.push(name.slice(start + 1, end));

                selectedObjects.push({
                    id: id,
                    name: name.slice(start + 1, end)
                });

            }
            return {
                selectedObjects: selectedObjects,
                selectedObjectsId: selectedObjectsId,
                selectedObjectsName: selectedObjectsName
            };
        }


        var selectForm = {};
        selectForm.confirm = confirm;
        exports('selectForm', selectForm);

    }
</script>
</body>
</html>